3.주가 조회 프로그램

파이썬 Flask로 한국 주식 시세 조회 웹 애플리케이션을 단일 파일(app.py)로 만들어줘. 파일 하나에 백엔드(Flask API)와 프론트엔드(HTML/CSS/JS)를 전부 담아줘.

========================================
프로그램 개요 
========================================
한국 거래소(KRX)에 상장된 주식의 과거 시세를 조회하고, 차트로 시각화하는 웹 앱이야.
사용자가 종목명(예: 삼성전자)이나 6자리 종목코드(예: 005930)를 입력하면 해당 종목의 주가 데이터를 불러와서 차트로 보여줘.
백엔드는 Flask, 주가 데이터는 pykrx 라이브러리를 사용해줘.
프론트엔드 HTML은 Flask의 index 라우트에서 f-string으로 직접 반환하는 구조로 해줘. 별도의 템플릿 파일 없이 app.py 한 파일에 전부 들어가야 해.
차트는 Chart.js (CDN)로 그려줘.
======================================== 
2. 기능
========================================
종목 검색 및 매핑

서버가 시작될 때 KRX 상장법인목록 엑셀 파일을 다운로드해서 종목명↔종목코드 매핑 딕셔너리를 미리 구축해줘.
다운로드 URL은 "https://kind.krx.co.kr/corpgeneral/corpList.do?method=download&searchType=13" 이거야.
urllib.request로 다운받고, pandas의 read_html로 파싱해줘. 인코딩은 euc-kr이야. SSL 검증은 꺼줘.
이 방법이 실패할 경우 대비해서, pykrx의 get_market_ticker_list (KOSPI, KOSDAQ)로 시도하는 두 번째 방법도 넣어줘.
두 가지 방법을 순서대로 시도하고, 하나라도 성공하면 캐시 완료 처리해줘.
캐시는 한 번만 구축하면 되니까 전역 플래그(_CACHE_BUILT)로 중복 실행 방지해줘.
resolve_ticker 함수를 만들어서 사용자 입력을 받으면 아래 순서로 종목을 찾아줘: (1) 캐시된 코드 딕셔너리에서 코드로 직접 매칭 (2) 6자리 숫자인데 캐시에 없으면 pykrx의 get_market_ticker_name으로 직접 조회 시도 (3) 캐시된 이름 딕셔너리에서 정확히 이름 매칭 (4) 부분 문자열 매칭 (종목명에 검색어가 포함되면 매칭) (5) 전부 실패하면 None 반환

API 엔드포인트: /api/search (GET) 

쿼리 파라미터: q(종목명 또는 코드), start(시작일 YYYYMMDD), end(종료일 YYYYMMDD), ma1, ma2, ma3(이동평균선 기간), chart_type(line 또는 candle)
start 기본값은 오늘 기준 90일 전, end 기본값은 오늘, ma 기본값은 5/20/60, chart_type 기본값은 line으로 해줘.
이동평균선 계산을 위해 실제 데이터는 start보다 250일 전부터 가져와줘. pykrx의 get_market_ohlcv로 데이터를 불러와.
종가 기준으로 rolling mean을 계산해서 MA 컬럼 3개를 추가해줘.
계산 후 원래 요청 기간(start 이후)으로 필터링해줘.
JSON 응답에는 code, name, dates 배열, open/high/low/close/volume 배열, ma 배열 3개, ma_keys, chart_type을 담아줘.
MA 값에 NaN이 있으면 None으로 변환해줘.
종목을 못 찾거나 데이터가 없으면 적절한 에러 메시지와 404를 반환해줘.
서버 오류는 traceback 출력 후 500 반환해줘.

메인 페이지: /

HTML 전체를 Flask 라우트 함수 안에서 f-string으로 반환해줘.
기본 시작일은 오늘 - 90일, 종료일은 오늘로 세팅해줘.

======================================== 
3. 디자인
========================================
전체 레이아웃

최상단에 헤더 바가 있고, 그 아래는 좌우 2분할 레이아웃이야.
왼쪽 패널(340px 고정 너비)은 검색 조건 입력 영역이고, 오른쪽 패널은 차트와 결과 표시 영역이야.
모바일(860px 이하)에서는 좌우 분할 대신 상하 분할로 전환해줘.

컬러 & 스타일

전체적으로 아주 어두운 다크 테마야. 배경은 #0d0d0d, 패널은 #141414, #111 계열이야.
텍스트는 #e0e0e0 (밝은 회색), 보조 텍스트는 #666~#aaa 사이.
입력 필드 배경은 #1e1e1e, 테두리는 #333, 포커스 시 #888.
폰트는 구글 폰트 'Jua'를 사용해줘. 전체 앱에 통일해서 적용해.
헤더는 linear-gradient(135deg, #1a1a1a, #2a2a2a)이고 하단에 #333 테두리, 그림자 넣어줘.
스크롤바도 커스텀해줘. 너비 6px, 트랙 투명, 썸은 #333 둥글게.

헤더

왼쪽에 "PyKRX 주가 조회"라고 큰 글씨(28px, 볼드, 흰색)로 표시하고, 바로 옆에 "v1.1"을 작게(16px, #888) 붙여줘.
왼쪽 패널 (입력 영역)

섹션별로 구분해줘. 각 섹션 위에 작은 대문자 제목(13px, #666, uppercase, letter-spacing: 2px)을 넣어줘.

섹션 사이에는 얇은 구분선(#222)을 넣어줘.

구성 순서: (1) "종목 검색" 섹션: 텍스트 입력 필드 하나. placeholder는 "예: 삼성전자 또는 005930". 엔터키 누르면 검색 실행. (2) "조회 기간" 섹션: 빠른 기간 선택 버튼 6개(1주/1개월/3개월/6개월/1년/2년)를 가로로 나열해줘. 3개월이 기본 active 상태. 아래에 시작일/종료일 date input 2개. (3) "차트 설정" 섹션: 차트 유형 선택 드롭다운 (라인 차트 / 캔들스틱 차트) (4) "이동평균선 (MA)" 섹션: 단기/중기/장기 number input 3개를 가로로 나란히 배치. 기본값 5, 20, 60. (5) 맨 아래에 "조 회" 버튼. 넓게 꽉 차게. 배경은 gradient(#333→#444), 테두리 #555, 글씨 18px 흰색. 호버 시 살짝 위로 올라가는 효과.

빠른 기간 버튼을 누르면 해당 일수만큼 날짜를 계산해서 시작일/종료일 input에 자동으로 넣어주고, 누른 버튼에 active 클래스를 토글해줘.

오른쪽 패널 (결과 영역)

초기 상태에는 가운데에 안내 문구 "왼쪽에서 종목을 검색하세요"와 간단한 SVG 아이콘을 회색으로 보여줘.

검색 실행 시 로딩 오버레이(반투명 검정 배경 + 회전 스피너 + "데이터를 불러오는 중..." 텍스트)를 전체 화면에 띄워줘.

에러 발생 시 어두운 빨간 배경(#2a1a1a)의 에러 메시지 박스를 보여줘.

정상 결과가 오면: (1) 상단에 종목명(26px 흰색), 종목코드(15px 회색), 현재가(32px 흰색, 오른쪽 정렬), 등락 정보를 한 줄로 표시해줘. (2) 등락은 전일 대비 계산해서 상승이면 빨간색(#ff4d4d, ▲), 하락이면 파란색(#4d9fff, ▼), 보합이면 회색으로 표시해줘. (3) 차트 영역은 둥근 테두리(12px)의 어두운 박스(#161616) 안에 넣어줘. (4) 차트는 상하 2분할이야. 위쪽(flex:3)은 가격 차트, 아래쪽(flex:1)은 거래량 차트. 사이에 얇은 구분선 넣어줘. (5) 차트 아래에 정보 카드 6개를 그리드(auto-fit, minmax 150px)로 배치해줘: 기간 최고가, 기간 최저가, 평균 종가, 총 거래량, 평균 거래량, 조회 기간(일수). (6) 카드는 어두운 배경(#1a1a1a), 테두리(#262626), 둥근 모서리(10px). 위에 작은 라벨(12px 회색), 아래 값(18px 밝은 회색).

차트 상세

Chart.js v4.4.7과 chartjs-adapter-date-fns v3.0.0을 CDN으로 불러와줘.

라인 차트 모드: 종가를 흰색 라인(2px)으로 그려줘. 아래쪽에 아주 연한 흰색 fill. 포인트는 안 보이게(radius: 0), tension: 0.3.

캔들스틱 모드: Chart.js에 캔들스틱 플러그인 대신 bar 차트의 floating bar로 구현해줘. 각 봉의 data 값을 [시가와 종가 중 작은 값, 큰 값] 배열로 넣어줘. 양봉(종가>=시가)이면 빨간색(rgba(255,77,77,0.85)), 음봉이면 파란색(rgba(77,159,255,0.85)). 고가/저가는 아주 연한 점선 라인으로 따로 그려줘. y축 범위는 저가 최솟값의 0.97배 ~ 고가 최댓값의 1.03배로 수동 설정해줘.

이동평균선 3개: 노란색(rgba(255,200,50,.85)), 하늘색(rgba(100,180,255,.85)), 분홍색(rgba(255,100,150,.85)). 선 두께 1.5px, 포인트 없음.

거래량 차트: 전일 대비 종가가 올랐으면 빨간색(rgba(255,77,77,.45)), 내렸으면 파란색(rgba(77,159,255,.45)), 첫 봉은 회색. x축 라벨은 숨기고, y축은 억/만 단위로 축약 표시해줘.

모든 차트의 y축은 오른쪽에 배치해줘.

차트 배경 격자선은 rgba(255,255,255,.04)로 아주 연하게.

툴팁은 어두운 배경(#222)에 밝은 글씨. 캔들 모드에서는 시/고/저/종을 한 줄에 모두 표시해줘.

숫자 포맷은 한국식 천단위 콤마(toLocaleString('ko-KR'))로 해줘.

x축 tick은 최대 12개까지만 표시해줘.

차트 애니메이션은 600ms.

========================================
4. 기술
========================================
언어: Python 3
프레임워크: Flask
주요 라이브러리: pykrx (주가 데이터), pandas (데이터 처리)
프론트엔드: HTML5 + CSS3 + 바닐라 JavaScript (프레임워크 없음)
차트: Chart.js v4.4.7 (CDN), chartjs-adapter-date-fns v3.0.0 (CDN)
폰트: Google Fonts - Jua
파일 구조: app.py 단일 파일
서버 실행: debug=True, port=5000, use_reloader=False

======================================== 
5. 추가 조건
========================================

HTML 안의 모든 중괄호는 f-string과 충돌하니까 {{ }} 로 이스케이프 처리해줘. 이거 정말 중요해. JavaScript 코드 안의 중괄호, CSS 안의 중괄호 전부 이중 중괄호로 해야 해.
JavaScript의 템플릿 리터럴(백틱 안의 ${변수})도 f-string과 충돌하니까 ${{변수}} 형태로 이스케이프해줘.
서버 시작 전에 main 블록에서 캐시를 미리 구축하고, 안내 메시지(구분선, 서버 URL 등)를 콘솔에 출력해줘.
API 호출 시 콘솔에 "[조회] 종목명(코드) | 시작일~종료일" 형태로 로그를 남겨줘.
fetch 호출은 async/await 패턴으로 해줘.
에러, 로딩, 결과, 플레이스홀더 상태를 CSS 클래스(show) 토글로 관리해줘.
차트 객체(priceChart, volumeChart)는 전역 변수로 관리하고, 새 검색 시 이전 차트를 destroy()한 뒤 새로 그려줘.
코드 전체를 한 번에 완성해줘. 부분 생략 없이 전체 코드를 출력해줘.